<template>
	<tm-app v-if="showPage" ref="app" color="#F9F9FA">
		<tm-carousel
			autoplay
			:round="0"
			:width="750"
			:height="750"
			:list="detail.banner"
			imgModel="aspectFill"
		></tm-carousel>

		<view class="px-24 bgc-white">
			<view class="pt-24 fd-r">
				<view class="flex1 fd-r ai-fe c-red">
					<text class="text-24 mb-4">￥</text>
					<text class="text-35 fw-b">{{ currentSku.price }}</text>
				</view>
			</view>

			<view class="py-24 fd-r">
				<text class="flex1 fs-28 fw-b text-231815">
					{{ currentSku.title }}
				</text>
				<image
					class="w-42 h-42"
					src="/static/share1.png"
					mode=""
				></image>
			</view>
		</view>

		<view class="mt-24 p-24 fd-r bgc-white" @click="HGotoStore">
			<image
				class="w-64 h-64 mr-24"
				:src="detail.tenantLogo"
				mode="aspectFill"
			></image>
			<text class="flex1 fw-b">{{ detail.tenantName }}</text>
			<tm-icon name="tmicon-angle-right"></tm-icon>
		</view>

		<view
			class="z-card px-24 py-32"
			v-if="attribute && attribute.length > 0"
		>
			<view class="fd-r jc-c">
				<view class="divider w-120"></view>
				<text class="mx-24 fs-28 fw-b text-231815">商品信息</text>
				<view class="divider w-120"></view>
			</view>

			<block v-for="item in attribute" :key="id">
				<view class="pt-24 fd-r fs-28">
					<text class="w-120 text-7D7D7D">{{ item.label }}：</text>
					<text class="flex1 text-000000">{{ item.value }}</text>
				</view>
			</block>
		</view>

		<view class="bgc-white mt-24 py-24 fd-r jc-c">
			<view class="divider w-120"></view>
			<text class="mx-24 fs-28 fw-b text-231815">图文详情</text>
			<view class="divider w-120"></view>
		</view>

		<view v-if="detail.imgs && detail.imgs.length > 0" class="fd-c">
			<block v-for="(item, index) in detail.imgs" :key="index">
				<image
					class="w-full"
					:src="item"
					mode="widthFix"
					lazy-load
					@click="HPreview(item)"
				></image>
			</block>
		</view>

		<view class="z-card p-24">
			<view class="fd-r jc-c">
				<view class="divider w-120"></view>
				<text class="mx-24 fs-28 fw-b text-231815">平台说明</text>
				<view class="divider w-120"></view>
			</view>
		</view>

		<z-shop-cart @showSku="HShowSku" />

		<z-sku ref="skuR" @change="HChangeSku" />
	</tm-app>

	<tm-skeleton v-else></tm-skeleton>
</template>

<script setup>
import { ref } from 'vue';
import ZShopCart from '@/component/z-shop-cart/z-shop-cart.vue';
import ZSku from './sku.vue';

import { storeToRefs } from 'pinia';
import { useGoodStore } from './store.js';
const goodStore = useGoodStore();
const { detail, skuList, currentSku, attribute, showPage } =
	storeToRefs(goodStore);

import { onLoad } from '@dcloudio/uni-app';
onLoad(({ spuId, skuId }) => {
	goodStore.HGetDetail(spuId, skuId);
});

const HGotoStore = () => {
	uni.navigateTo({
		url: `/pages/zone1/store/index?id=${detail.value.storeId}`
	});
};

const HPreview = (url) => {
	uni.previewImage({ urls: [url] });
};

import { skuPage } from '@/api/skuApi.js';
const skuR = ref(null);
const HShowSku = async (type) => {
	const { data } = await skuPage({
		spuId: detail.value.id,
		current: 1,
		size: 500
	});
	skuList.value = data.records;

	skuR.value.open(type);

	uni.$off('sku-back');
	uni.$on('sku-back', (res) => {});
};
</script>

<style></style>
